<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Echarts-vue</title>
    <script src="elementUI/vue.js"></script>
    <script src="elementUI/echarts.js"></script>
    <script src="elementUI/vue-echarts.js"></script>
    <script src="elementUI/axios.min.js"></script>
</head>
<body>

    <div id="app">
        <div id="main" style="height:600px"></div>
        <button @click="changeData" style="align-content: center">获取统计数据</button>
    </div>



    <script>
        let myChart = null

        new Vue({
            el:'#app',
            data(){
                return{
                    option:{
                        title: {
                            text: '查询汽车车商有几种车型',
                            subtext: '单位：种',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                        },
                        series: [
                            {
                                name: '访问来源',
                                type: 'pie',
                                radius: '50%',
                                data: [
                                    {value: 1048, name: '类型1'},
                                    {value: 735, name: '类型2'},
                                    {value: 580, name: '类型3'},
                                    {value: 484, name: '类型4'},
                                    {value: 300, name: '类型5'}
                                ],
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    }
                }
            },
            mounted(){
                myChart = echarts.init(document.getElementById('main'));
                myChart.setOption(this.option);
            },
            methods:{
                changeData:function (){
                  let _this = this;
                  axios.get('http://localhost:8090/car-recommand/api/car/findCarFactoryNums')
                    .then(function (response){
                        let list = response.data.results;
                        console.log(list.length);
                        let a = new Array();
                        for(let i = 0; i < list.length; i++){
                            a.push(list[i].name);
                        }

                        _this.option.legend.data = a;
                        _this.option.series[0].data = list;
                    })
                    .catch(function (error){
                       console.log(error);
                    });

                    myChart.setOption(this.option);


                },
            }
        });

    </script>
</body>
</html>